<template>
  <!-- 提现记录 -->
  <view class="record-content">
    <view class="record-top">
      <view class="record-top-top">
        <view class="top-left">
          <text class="top-left-value">0.00</text>
          <text>可提现佣金(元)</text>
        </view>
        <view class="top-right">
          <text class="top-right-bt" @click="clickApply">申请提现</text>
        </view>
      </view>
      <view class="record-top-bottom">
        <view class="bottom-left">
          <text>总收益(元)：</text>
          <text>{{"0.00"}}</text>
        </view>
        <view class="bottom-right">
          <text>已提现(元)：</text>
          <text>{{"200.00"}}</text>
        </view>
      </view>
    </view>

    <view class="record-bottom">
      <template>
        <view class="record-bottom-item">
          <view class="item-left">
            <text class="left-state-hint">{{"提现成功"}}</text>
            <text>{{"2025-03-05 14:07:57"}}</text>
          </view>
          <view class="item-right">
            <text>{{"-50"}}</text>
          </view>
        </view>
      </template>
    </view>

  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { onReady, onLoad } from '@dcloudio/uni-app';

  onLoad(() => {

  })
  onReady(() => {
    console.log('onReady--')

  })
  
  function clickApply(){
    uni.navigateTo({
      url: '/sub_popularize_model_pages/request_withdrawal'
    });
  }
  
  
</script>

<style lang="scss">
  .record-content {
    width: 100%;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;

  }

  .record-top {
    width: 100%;
    height: 300rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    background: white;

    .record-top-top {
      display: inline-flex;
      width: 100%;
      height: 50%;

      .top-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 60%;
        font-size: 28rpx;

        .top-left-value {
          font-size: 50rpx;
          color: #FFB200;
        }
      }

      .top-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40%;

        .top-right-bt {
          width: 200rpx;
          line-height: 80rpx;
          text-align: center;
          background: #FEEB64;
          border-radius: 40rpx;
          font-size: 28rpx;
          font-weight: 700;
        }
      }

    }

    .record-top-bottom {
      display: inline-flex;
      width: 100%;
      height: 50%;

      .bottom-right,
      .bottom-left {
        display: inline-flex;
        align-items: center;
        width: 50%;
        height: 100%;
        font-size: 28rpx;
      }

    }

  }

  .record-bottom {
    width: 100%;

    .record-bottom-item {
      display: inline-flex;
      width: 100%;
      height: 150rpx;
      margin-top: 20rpx;
      // border-bottom: 1rpx solid #D8D8D8;
      border-bottom: 1rpx solid #cfcfcf;

      .item-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 80%;
        height: 100%;
        font-size: 30rpx;


        .left-state-hint {
          padding: 10rpx 0;
          font-size: 40rpx;
          font-weight: 700;
        }

      }

      .item-right {
        width: 20%;
        height: 100%;
        line-height: 150rpx;
        text-align: center;
        color: #FFB200;
        font-size: 45rpx;
      }

    }

  }
</style>